<template>
    <div class="hotspot-icon h-full">
        <el-form :inline="true" :model="searchform">
            <div class="flex justify-between mb-3">
                <el-space>
                    <el-button type="success" size="default" @click="toggleExpand">
                        <i class="iconfont icon-jiantou_shangxiaqiehuan"></i>{{ isExpandAll ? '收起' : '展开' }}
                    </el-button>
                    <el-button size="default" type="primary" :icon="Plus" @click="openDialog('add')">新增</el-button>
                    <el-button :icon="Refresh" @click="getList">刷新</el-button>
                </el-space>
<!--                <el-space>-->
<!--                    <el-input v-model="searchform.name" placeholder="请输入目录名称" clearable style="width:200px;"/>-->
<!--                    <el-button type="primary" @click="getList" :icon="Search">查询</el-button>-->
<!--                </el-space>-->
            </div>
        </el-form>
        <div class="table-section grid" style="height:calc(100% - 32px)">
            <el-table ref="tableRef" :data="tableData" border row-key="id" :default-expand-all="isExpandAll" style="height:100%">
                <el-table-column prop="name" label="目录名"/>
                <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="order_num" label="排序"/>
                <el-table-column prop="createdAt" label="创建时间"/>
                <el-table-column prop="updatedAt" label="更新时间"/>
                <el-table-column fixed="right" label="操作" align="center">
                    <template #default="scope">
                        <el-button type="primary" plain @click="openDialog('add',scope.row)">新增</el-button>
                        <el-button type="success" plain @click="openDialog('update',scope.row)">编辑</el-button>
                        <el-button type="danger" plain @click="deleteItem(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <dialog-add-edit ref="dialog-add-edit" @update="getList"></dialog-add-edit>
    </div>
</template>
<script setup>
import { ref, reactive, computed, nextTick, onMounted, useTemplateRef } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete, Edit, Search, Plus, Refresh } from '@element-plus/icons-vue'
import motionCatalogApi from 'api/model/motion-catalog.js'
import DialogAddEdit from './dialog-add-edit.vue'

const dialogAddEditRef = useTemplateRef('dialog-add-edit')
/******************************* 相关增删改查 *******************************/

const searchform = reactive({
    name: '',
})

// 表格ref 对象
const tableRef = ref()

// 是否展开所有
const isExpandAll = ref(true)

// 展开和折叠切换
const toggleExpand = () => {
    isExpandAll.value = !isExpandAll.value
    nextTick(() => {
        tableData.value.forEach(item => {
            tableRef.value.toggleRowExpansion(item, isExpandAll.value)
        })
    })
}

/**
 * 点击打开弹框
 * @param type
 * @param item
 */
function openDialog (type, item) {
    dialogAddEditRef.value.openDialog(type, item)
}

/**
 *  获取列表
 */
const tableData = ref([])

async function getList () {
    const { code, data = [] } = await motionCatalogApi.tree.get({
        name: searchform.name,
    })
    tableData.value = data
}

/**
 * 删除操作
 * @param id
 */
function deleteItem (id) {
    /*删除二次确认*/
    ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        const { code, data = [] } = await motionCatalogApi.delete.post({ id })
        if (code === 0) {
            getList()
            ElMessage.success('删除成功')
        }
    }).catch(() => {
        ElMessage.info('取消删除')
    })
}

onMounted(() => {
    getList()
})

</script>


<style lang="less">


</style>
